<template>
  <!-- 通用页面整体容器框架 -->
  <a-spin
    :loading="FilmRead.loading"
    tip="数据加载中，请勿关闭浏览器"
    class="spin-loading"
  >
    <template #icon>
      <icon-loading />
    </template>
    <div class="container">
      <!-- 顶部 -->
      <!-- <component
        :is="PageHeader"
        v-if="isHeader"
        :key="FilmRead.currentSeriesIndex"
        v-bind="
          reactive({
            ...$attrs,
            ...props,
            pageType,
            disabled,
            queryBarList: HeaderHooks.queryBarList.value,
            markBarList: HeaderHooks.markBarList.value,
            HeaderHooks,
          })
        "
      ></component> -->
      <page-header
        v-if="isHeader"
        v-bind="
          reactive({
            ...$attrs,
            ...props,
            pageType,
            disabled,
            queryBarList: HeaderHooks.queryBarList.value,
            markBarList: HeaderHooks.markBarList.value,
            HeaderHooks,
            videoDisabled: LeftHooks.leftHooksData.videoDisabled,
          })
        "
      ></page-header>
      <!-- 中间部分 -->
      <div class="content-container">
        <!-- 内容区左侧 -->
        <!-- <component
          :is="PageLeftContent"
          :key="FilmRead.currentSeriesIndex"
          class="left"
          v-if="isLeft"
          v-bind="reactive({ ...$attrs, ...props, disabled, pageType, LeftHooks })"
        ></component> -->
        <page-left-content
          class="left"
          v-if="isLeft"
          v-bind="reactive({ ...$attrs, ...props, disabled, pageType, LeftHooks })"
        ></page-left-content>
        <!-- 内容区 -->
        <!-- <slot name="content"></slot> -->
        <!-- <is-component></is-component> -->
        <component
          :is="isComponent"
          v-if="isContent"
          v-bind="
            reactive({
              ...$attrs,
              ...props,
              disabled,
              pageType,
              LeftHooks,
              RightHooks,
              HeaderHooks,
              ContentHooks,
            })
          "
        ></component>
        <!-- 内容区右侧 -->
        <!-- <component
          :is="PageRightContent"
          :key="FilmRead.currentSeriesIndex"
          v-if="isRight"
          v-bind="
            reactive({
              ...$attrs,
              ...props,
              disabled,
              pageType,
              currentId: LeftHooks.leftHooksData.currentIndex,
              options: RightHooks.rightHooksData.formOptions,
              form: RightHooks.rightHooksData.form,
              RightHooks,
              handleChange: RightHooks.handleChange,
            })
          "
        ></component> -->
        <page-right-content
          v-if="isRight"
          v-bind="
            reactive({
              ...$attrs,
              ...props,
              disabled,
              pageType,
              currentId: LeftHooks.leftHooksData.currentIndex,
              options: RightHooks.rightHooksData.formOptions,
              form: RightHooks.rightHooksData.form,
              isFrame: LeftHooks.leftHooksData.isFrame,
              RightHooks,
              formRef: HeaderHooks.formRef,
              handleChange: RightHooks.handleChange,
            })
          "
        ></page-right-content>
      </div>
    </div>
  </a-spin>
</template>

<script lang="ts" setup name="FilmReadPage">
import { provide, reactive, computed, watch, onMounted, type Component } from "vue";
import { useRoute } from "vue-router";
import * as Store from "@/store";
import PageHeader from "./components/pageHeader/index.vue";
import PageLeftContent from "./components/pageLeft/index.vue";
import PageRightContent from "./components/pageRight/index.vue";
import useHeader from "./hooks/useHeader";
import useLeft from "./hooks/useLeft";
import useContent from "./hooks/useContent";
import useRight from "./hooks/useRight";

interface Prop {
  type: string;
  isEye: boolean;
  isColor: boolean;
  isDel: boolean;
  isTips: boolean;
  isLeft: boolean;
  isContent: boolean;
  isRight: boolean;
  isHeader: boolean;
  lesionTips: string[];
  isComponent: Component;
}
const props = defineProps<Prop>();
const route = useRoute();
const pageType = route.query.type as string;
const FilmRead = Store.useFilmRead();
FilmRead.loading = true;
await FilmRead.getSettingData({
  id: route.query.id as unknown as number,
  type: pageType,
  dataType: route.query.dataType as unknown as string
});
// FilmRead.getDictionaryData();

// 框架hooks事件
const HeaderHooks = useHeader(props.type);
const LeftHooks = useLeft();
const ContentHooks = useContent();
const RightHooks = useRight();
// 依赖注册当前模式
provide("provideState", {});
provide("isCreate", pageType === 'create');
provide("isQuery", pageType === 'query');
provide("isEdit", pageType === 'update');
// 处理disabled布尔值
const disabled = computed(() => pageType === 'query');
watch(() => FilmRead.currentSeriesIndex, (val: number) => {
  if (val) {
    LeftHooks.resetHookData();
    HeaderHooks.resetHookData();
    RightHooks.resetHookData();
  }
}, {
  immediate: true,
  deep: true
})
FilmRead.interfaceData.seriesList
&& watch(() => FilmRead.interfaceData.seriesList[FilmRead.currentThumbnailIndex].id, (val) => {
  if (val) {
    LeftHooks.resetHookData();
    HeaderHooks.resetHookData();
    RightHooks.resetHookData();
  }
}, {
  immediate: true,
  deep: true
})

// onMounted(() => {
//   FilmRead.loading = false;
// })
// 定义全局是否禁止操作属性
// const disabled = ref(false);
// disabled.value = route.query.type === "query";
// 初始禁用鼠标右键
// 获取病灶数据
// const lesionData = Store.useLesionData();
// promise异步处理
// lesionData.getDataList();
// 获取废片原因数据
// const FilmReadRight = Store.useFilmReadRight();
// FilmReadRight.fetchScrapList();
// const { getFetchArData } = Store.useFilmReadHeader();
// 根据路由id获取序列号及请求配置接口
// route.query.id && getFetchArData("anno/result/series/get", { taskId: +route.query.id });
// 获取顶部工具条
// const toolBarList = Store.useToolBar();
// toolBarList.getToolList(props.type);

// const emit = defineEmits(["toolBarClick", "lesionClick"]);
// provide("provideState", {
//   getToolBarItem: (callback: Function) => {
//     emit("toolBarClick", callback());
//   },
//   getLesionItem: (callback: Function) => {
//     emit("lesionClick", callback());
//   },
//   isEye: props.isEye,
//   isColor: props.isColor,
//   isDel: props.isDel,
// });
</script>

<style lang="less" scoped>
* {
  user-select: none;
}
.spin-loading {
  width: 100vw;
  height: 100vh;
  color: #d2effc;
}
.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.content-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: calc(100% - 94px);
}
</style>
<style lang="less">
.el-message {
  height: 38px;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
  background: linear-gradient(0deg, #272727, #272727),
    linear-gradient(0deg, #666666, #666666);
  border: 1px solid rgba(102, 102, 102, 1);
  border-radius: 0;
  p {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0px;
    color: #fff !important;
  }
}
</style>
